import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, message, Input, Form, Space, Radio, InputNumber } from 'antd';

const mapStateToProps = (state: any) => ({
    account: state.account,
    loading: state.loading.effects['account/postObjWithRes'],
});
class DetailCollectionConfigurationModal extends PureComponent<any, any> {

    formRef = React.createRef<FormInstance>();

    constructor(props: any) {
        super(props);
        this.state = {
            cycleDate: null,
            cycleKm: null,
        };
    }

    componentDidMount() {
        this.props.onRef(this);
    }

    setData = (record) => {
        setTimeout(()=>{
            const fillFileds = {
                id: record.id,
                collectName: record.collectName,
                collectFrequency: record.collectFrequency,
                collectCycle: record.collectCycle
            }
            if(record.collectCycle == 0) {
                this.setState({
                    cycleDate: record.cycleValue,
                    cycleKm: null,
                })
            } else if(record.collectCycle == 1){
                this.setState({
                    cycleDate: null,
                    cycleKm: record.cycleValue,
                })
            }else{
                this.setState({
                    cycleDate: null,
                    cycleKm: null,
                })
            }
            this.formRef.current?.setFieldsValue(fillFileds);
        },10)
    }

    save = () => {
        this.formRef.current?.submit();
    }

    ok = (values: any) => {
        this.close();
    };

    close = () => {
        // this.formRef.current?.resetFields();
        const { closeModal } = this.props;
        closeModal();
        this.setState({
            cycleData: null,
            cycleKm: null
        })
    };
    render() {
        const { modalVisible,  loading } = this.props;
        const {cycleDate, cycleKm} = this.state;
        const footer = (
            <div>
                <Button size="small" onClick={this.close}>取消</Button>
                <Button size="small" loading={loading} onClick={this.save} type="primary">确认</Button>
            </div>
        );
        return (
            <Modal
                style={{ top: 20 }}
                footer={footer}
                width={700}
                title="采集配置详情"
                visible={modalVisible}
                onCancel={this.close}
            >
                <Form
                   labelCol={{
                    span: 6,
                  }}
                  wrapperCol={{
                    span: 18,
                  }}
                    ref={this.formRef}
                    onFinish={this.ok}
                >
             <Form.Item label="采集配置名称"  required>
                 <Form.Item name="collectName" 
                 noStyle 
                 rules={[{ required: true, message: '请输入采集配置名称' }]}
             >
                    <Input maxLength={50} placeholder="请输入采集配置名称"  style={{width: '70%'}} disabled/>
                </Form.Item>
                <span
                   className="ant-form-text"
                   style={{
                       marginLeft: 8,
                    color: "rgba(0, 0, 0, 0.45)",
                   }}
                >
                  不可重复
                 </span>
            </Form.Item>          
            <Form.Item label="采集频率"  required>
                 <Form.Item name="collectFrequency" 
                 noStyle 
                 rules={[{ required: true, message: '请输入采集频率' }]}
             >
                    <InputNumber max={10}min={1} placeholder="请输入1-10秒的整数" style={{width: '70%'}} disabled/>
                </Form.Item>
                <span
                   className="ant-form-text"
                   style={{
                       marginLeft: 8,
                   }}
                >
                  秒，采集一次
                 </span>
            </Form.Item>      
            <Form.Item label="采集周期"  required>
                 <Form.Item name="collectCycle" 
                 noStyle 
                 rules={[{ required: true, message: '请选择采集周期' }]}
             >
                  <Radio.Group disabled>
                    <Space direction="vertical">
                       <Radio value={0}>
                        按时间&nbsp;
                        <InputNumber 
                        style={{width: '50%'}}
                        max={7}min={1} placeholder="请输入1-7天的整数"
                        value ={cycleDate} 
                        onChange={(e) =>{
                            if(e){
                            this.setState({
                                cycleDate: e
                            })
                            }else{
                                this.setState({
                                    cycleDate: null
                                })
                            }
                        }}
                        disabled
                        />
                        &nbsp;天后，恢复配置
                       </Radio>
                      <Radio value={1}>
                       按里程&nbsp;
                       <InputNumber 
                        style={{width: '48%'}}
                        max={500}min={5} placeholder="请输入5-500的整数"
                        value ={cycleKm} 
                        onChange={(e) =>{
                            if(e){
                            this.setState({
                                cycleKm: e
                            })
                            }else{
                                this.setState({
                                    cycleKm: null
                                })
                            }
                        }}
                        disabled
                        />
                       &nbsp;公里后，恢复配置
                      </Radio>
                    </Space>
                  </Radio.Group>  
                 </Form.Item>
            </Form.Item>
             </Form>
            </Modal>
        );
    }
}
export default connect(mapStateToProps)(DetailCollectionConfigurationModal);